<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
	<link rel="shortcut icon" href="#"/>
	<script data-main="/js/app" th:src="@{/webjars/jquery/jquery.min.js}"></script>
	<script data-main="/js/app" th:src="@{/webjars/stomp-websocket/stomp.min.js}"></script>
	<script th:src="@{/js/device.js}"></script>
</head>
<body>
<div>
	<label>端口号：</label><select id="device-prots"></select>
	<label>上报间隔：</label><input id="device-push-interval" type="number" value="10"><span>每秒</span>
	<input id="device-open" type="button" value="启动采集">
</div>

<div>
	<h2>设备信息<span id="device-update-time"></span></h2>
	<label>设备编号：</label><span id="device-id">未知</span>
	<label>设备名称：</label><span id="device-name">未知</span>
	<label>设备版本号：</label><span id="device-version">未知</span>
	<label>在线状态：</label><span id="device-link-state">离线</span>
</div>

<div>
	<h2>实时传感器数据</h2>
	<div id="sensor-info-panel"></div>
</div>

<script th:inline="javascript">
	var device = null;
	$(document).ready(function(){
		var deviceId = [[${deviceId}]];
		
		// 创建传感器显示div面板
		function createSensorPanel(sensorAddress){
			// 据据传感器地址查找div是否存在，没有就创建,创建时按设备编号排序创建。
			if($('#sensor-info-panel>div[device-id='+sensorAddress+']').length<=0){
				if($('#sensor-info-panel').children('div').length>0){
					var isAdded=false;
					$('#sensor-info-panel>div').each(function(){
						if(parseInt($(this).attr('device-id'))>sensorAddress){
							$(this).before('<div device-id='+sensorAddress+'></div>');
							isAdded=true;
							return false;
						}
					});
					if(isAdded==false){
						$('#sensor-info-panel').append('<div device-id='+sensorAddress+'></div>');
					}
				}else{
					$('#sensor-info-panel').append('<div device-id='+sensorAddress+'></div>');
				}
			}
			return $('#sensor-info-panel>div[device-id='+sensorAddress+']');
		}
		
		device = new Device({
			deviceId:deviceId,
			onDeviceChanged:function(dev){
				var date = new Date();
				$('#device-id').html(dev.id);
				$('#device-name').html(dev.name);
				$('#device-version').html(dev.version);
				$('#device-update-time').html('[更新时间:'+date.toLocaleString()+']');
			},
			onDeviceOnline:function(devId){
				$('#device-link-state').html('在线');
				$('#device-open').val('停止采集');
			},
			onDeviceOffline:function(devId){
				$('#device-link-state').html('离线');
				$('#device-open').val('启动采集');
			},
			onSensorInfo:function(sensor){
				// 创建传感器面板并显示数据
				$sensorPanel = createSensorPanel(sensor.address);
				var date = new Date();
				$sensorPanel.html(
						'<div style="float:left;border: 1px solid #888;padding:0 5px;margin:5px;">'+
						'<h5>传感器地址：'+sensor.address+
						'<pre>['+date.toLocaleString()+']</pre></h5>'+
						'<pre>气体名称：'+sensor.gasName+'</pre>'+
						'<pre>气体浓度：'+sensor.gasConcentration+'</pre>'+
						'<pre>测量单位：'+sensor.measurementUnit+'</pre>'+
						'<pre>电池电压：'+sensor.batteryVoltage+'</pre>'+
						'<pre>工作状态：'+sensor.workState+'</pre>'+
						'<pre>是否低报：'+sensor.isLowAlarm+'</pre>'+
						'<pre>是否高报：'+sensor.isHighAlarm+'</pre>'+
						'<pre>是否模块异常：'+sensor.isModelException+'</pre>'+
						'<pre>是否电池欠压：'+sensor.isBatteryUnderVoltage+'</pre>'+
						'<pre>是否有报警测试：'+sensor.isAlarmTest+'</pre>'+
						'<pre>充电状态：'+sensor.chargeState+'</pre>'+
						'<pre>位置编码：'+sensor.pointCode+'</pre>'+
						'<pre>位置标记：'+sensor.pointFlag+'</pre>'+
						'<pre>无线模式：'+sensor.wirelessMode+'</pre>'+
						'<pre>低报加权：'+sensor.soonLowAlarmPercentage+'</pre>'+
						'<pre>高报加权：'+sensor.soonHighAlarmPercentage+'</pre>'+
						'</div>'
						);
				// 如果没有告警就把面板背景变白
				if(sensor.isHighAlarm==false && 					// 是否高报
						sensor.isLowAlarm==false && 				// 是否低报
						sensor.isBatteryUnderVoltage==false && 		// 是否电池欠压
						sensor.isModelException==false){			// 是否模块异常
					$sensorPanel.css('background-color','white');
				}
			},
			onSensorAlarm:function(sensor){
				// 使显示传感器的div背景变红
				$sensorPanel = createSensorPanel(sensor.address);
				$sensorPanel.css('background-color','red');
			}
		});
		// 获取设备端口号
		device.getPorts(function(data){
			for(var index in data){
				$('#device-prots').append('<option value="'+data[index]+'">'+data[index]+'</opton>');
			}
		},function(err){
			alert('获取端口号错误：'+err);
		});
		// 启动或关闭采集
		$('#device-open').click(function(){
			$button = $(this);
			if($button.val()=='启动采集'){
				var port = $('#device-prots').val();			// 选择的端口号
				var interval = $('#device-push-interval').val();// 数据上报的时间间隔
				$(device.open(port,interval,function(data){
					$button.val('停止采集');
				},function(err){
					alert('启动设备异常：'+err)
				}));					// 启动设备
			}else{
				$(device.close(function(){
					$button.val('启动采集');
				},function(err){
					alert('停止设备异常：'+err)
				}));
				
			}
		});
	});
</script>
</body>
</html>